<template>
  <div id="background">
    <div class="container">
      <form action="">
        <br />
        <h1>账号登录</h1>
        <div class="form">
          <div class="item">
            <label>邮箱号：</label
            ><input
              type="text"
              name="email"
              v-model.trim="email"
              placeholder="请输入邮箱号"
            />
            <!-- v-model把输入的值传输给name变量 -->
            <br />
          </div>
          <div class="item">
            <label>密码：</label
            ><input
              type="password"
              name="password"
              v-model.trim="password"
              placeholder="请输入密码"
            />
            <br />
          </div>
        </div>
      </form>
      <button type="submit" @click.prevent="handlelogin">登录</button>
      <!-- v-on点击按钮触发handlelogin方法 -->
      <button @click.prevent="handleregister">注册</button>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import { login } from "@/api";
import store from '@/store'
export default {
  data() {
    return {
      nickName: "",
      email: "", //姓名，用v-model绑定监听，将输入的字符串赋值给name变量
      password: "", //密码vvvvvvvv
    };
  },
  methods: {
    handlelogin: function () {
      var regEmail =
        /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
      if (this.email != "" && !regEmail.test(this.email)) {
        this.$message({
          message: "邮箱格式不正确",
          type: "error",
        });
        this.email = "";
        return;
      }

      if (
        this.email === localStorage["email"] &&
        this.password === localStorage["password"]
      ) {
        this.$router.replace("/Home"); //如果输入的名字以及密码正确路由跳转至个人页面
      } else if (this.email === "") {
        //邮箱为空
        this.$message({
          message: "邮箱不能为空",
          type: "error",
        });
      } else if (this.password === "") {
        //密码为空
        this.$message({
          message: "密码不能为空",
          type: "error",
        });
      } else {
        login({ email: this.email, password: this.password })
          .then(({ data }) => {
            //  登录成功，将数据存在浏览器的缓存中
            if (data.code == 0) {
              console.log(data.data);
              window.sessionStorage.setItem("userInfo", JSON.stringify(data.data));
              this.$store.commit('routeJump/updateRefreshHead');
              //跳转到首
              // this.$store.commit("routeJump/toHome");
              //跳转到来的地方
              
              this.$router.replace({path:store.state.routeJump.fromPath})
            } else {
              this.$message({
                message: "登录失败",
                type: "error",
              });
              this.email = "";
              this.password = "";
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    handleregister: function () {
      this.$router.replace("register"); //点击注册按钮，跳转至注册页面
    },
    //点击保持登录状态触发handlesave
    handlesave: function () {
      this.st = "true"; //修改登录状态为true
      localStorage.setItem("s", this.st);
      console.log(localStorage.s);
    },
  },
  beforeRouteEnter(to, from, next) {
    console.log(to, from,store);
    store.commit('routeJump/setFromPath',from.fullPath)
    next();
  },
};
</script>

<style scoped>
#background {
  width: 100%;
  height: 100%;
  background: url("../assets/img/背景图4.jpg");
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}

.container {
  width: 480px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  text-align: center;
  border-radius: 1px;
  margin-top: 10px;
}
.container h1 {
  color: rgb(9, 10, 10);
  margin-left: 20px;
}
.item {
  color: rgb(13, 10, 10);
  margin-left: 15%;
  margin-top: 35px;
  font-size: 20px;
  text-align: left;
}
.item label {
  float: left;
  width: 5em;
  margin-right: 1em;
  text-align: right;
}
input {
  margin-left: -5px;
  padding: 4px;
  border: solid 1px #a6a8b1;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  height: 23px;
  background: #ffffff;
  box-shadow: rgba(202, 97, 97, 0.1) 0px 0px 8px;
}
button {
  position: relative;
  height: 33px;
  width: 100px;
  background: #c12d27;
  border-radius: 1px;
  margin-top: 18px;
  box-shadow: none;
  color: rgb(248, 244, 244);
  margin-left: 40px;
  margin-right: 10px;
}
.keep {
  color: rgb(15, 12, 12);
}
.keep input {
  width: 15px;
  height: 15px;
  margin-top: 7px;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
